<script setup>
import { useAppStore, useWMTSStore } from '@/stores'
import * as monaco from 'monaco-editor'
import ExceptionLogger from '@/utils/errorHandler'

const wmtsStore = useWMTSStore()
const appStore = useAppStore()
let editor = null
const windowWidth = ref(window.innerWidth)
const windowHeight = ref(window.innerHeight)
const adaptHeight = appStore.showTabs ? (appStore.showFooter ? ref(187) : ref(227)) : appStore.showFooter ? ref(227) : ref(272)
const computedHeight = computed(() => windowHeight.value - adaptHeight.value)
const code = ref('')
const selectedValue = ref('选择加载的 JS 库')

async function handleUpdateValue(_, option) {
  const codeMap = {
    Leaflet: wmtsStore.leafletAddCode,
    Openlayers: wmtsStore.openlayersAddCode,
    Cesium: wmtsStore.cesiumAddCode,
    WebGL: wmtsStore.supermap3dAddCode
  }
  const selectedCode = codeMap[option.label]
  if (selectedCode) {
    try {
      editor.getModel().setValue(selectedCode)
      await editor.getAction('editor.action.formatDocument').run()
    } catch (error) {
      ExceptionLogger.logException('更新编辑器值时发生错误!')
    }
  }
}

// 选项列表
const layerOptions = ref([
  { label: 'Leaflet', value: 'Leaflet' },
  { label: 'Openlayers', value: 'Openlayers' },
  { label: 'Cesium', value: 'Cesium' },
  { label: 'WebGL', value: 'WebGL' }
])

const handleResize = () => {
  windowWidth.value = window.innerWidth
  windowHeight.value = window.innerHeight
}

onMounted(async () => {
  window.addEventListener('resize', handleResize)

  editor = monaco.editor.create(document.getElementById('editorContainer'), {
    value: code.value,
    language: 'javascript',
    automaticLayout: true,
    foldingStrategy: 'indentation',
    renderLineHighlight: 'all',
    selectOnLineNumbers: true,
    minimap: { enabled: false },
    readOnly: false,
    fontSize: 14,
    scrollBeyondLastLine: false,
    overviewRulerBorder: false,
    wordWrap: 'on',
    tabSize: 2
  })

  editor.getAction('editor.action.formatDocument').run()
})

onUnmounted(() => window.removeEventListener('resize', handleResize))

watch(
  () => wmtsStore.leafletAddCode,
  async () => {
    selectedValue.value = layerOptions.value[0].value
    editor.getModel().setValue(wmtsStore.leafletAddCode)
    await editor.getAction('editor.action.formatDocument').run()
  }
)

watch(
  () => appStore.colorMode,
  () => {
    monaco.editor.setTheme(appStore.colorMode === 'light' ? 'vs' : 'vs-dark')
  },
  { immediate: true }
)

watch(
  () => appStore.showTabs,
  (newVal) => {
    adaptHeight.value += newVal ? 45 : -45
  },
  { immediate: true }
)

watch(
  () => appStore.showFooter,
  (newVal) => {
    adaptHeight.value += newVal ? 40 : -40
  },
  { immediate: true }
)
</script>

<template>
  <n-card title="加载代码(测试)">
    <template #header-extra>
      <n-flex class="w-38">
        <n-select v-model:value="selectedValue" @update:value="handleUpdateValue" filterable :options="layerOptions" />
      </n-flex>
    </template>
    <n-infinite-scroll>
      <div id="editorContainer" :style="{ height: `${computedHeight}px` }"></div>
    </n-infinite-scroll>
  </n-card>
</template>
